<!DOCTYPE html>
<html style="background-color:#fff;height:100%">
<head>
    <meta charset="UTF-8">
    <title>集成电路布图表单页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css" />
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/it/common/css/style.css" />
    <style>
        .thesis {
            width: 100%;
            padding: 0px;
            height: 100%;
            overflow-y: hidden;
        }
        .thesis label {
            width: 30%!important;
        }
        .thesisbor>div {
            margin: 1% !important;
            padding: 0px 4% !important;
            width: 90% !important;
        }
        .beizhu-div {
            width: 60% !important;
        }
        .beizhu-div textarea{
            width: 100%!important;
        }
        .upload-file-div {
            width: 70%!important;
            padding-left: 2%
        }
        .upload-file-li {
            width: 90% !important;
        }
        .file-name-span {
            margin-top: 8px!important;
        }
        .thesis input {
            width: 160px!important;
            padding: 0px 0px 0px 10px!important;
        }
        .layui-form-select input{
            width: 152px!important;
        }
        .h34 {
            height: 34px;
        }
    </style>
</head>
<body>
<!--新建文件夹-->
<form class="layui-form">
<div class="layui-container" style="margin-top:40px;padding-bottom: 80px">
    <div class="thesis thesisOne whitebg">
        <div class="ft20 bold">集成电路布图设计信息</div>
        <ul class="clearfix">
            <li class="clearfix h34" style="width: 50%!important;">
                <label class="fl gary">布图设计名称<span style="color: red">*</span></label>
                <div class="fl">
                    <input type="hidden" name="spfId" value="${formData.spfId}">
                    <input type="text" name="spfF1" value="${formData.spfF1}" lay-maxlength="128" lay-verify="maxlength|required" placeholder="填写布图设计名称"/>
                </div>
            </li>
            <li class="clearfix h34" style="width: 50%!important;">
                <label class="fl gary">布图设计登记号<span style="color: red">*</span></label>
                <div class="fl">
                    <input type="text" name="spfF2" value="${formData.spfF2}" lay-maxlength="128" lay-verify="maxlength|required" placeholder="请选择布图设计登记号"/>
                </div>
            </li>
            <li class="clearfix h34" style="width: 50%!important;">
                <label class="fl gary">布图设计权利人名称<span style="color: red">*</span></label>
                <div class="fl">
                    <input type="text" name="spfF3" value="${formData.spfF3}" lay-maxlength="128" lay-verify="maxlength|required" placeholder="填写布图设计权利人名称"/>
                </div>
            </li>
            <li class="clearfix h34">
                <label class="fl gary">登记证书号<span style="color: red">*</span></label>
                <div class="fl">
                    <input type="text" name="spfF4" value="${formData.spfF4}" lay-maxlength="128" lay-verify="maxlength|required" placeholder="填写登记证书号"/>
                </div>
            </li>
            <li class="clearfix h34">
                <label class="fl gary">布图设计颁证日<span style="color: red">*</span></label>
                <div class="fl">
                    <input type="text" name="spfF5" id="spfF5" lay-verify="required" value="${formData.spfF5}" placeholder="布图设计颁证日"/>
                </div>
            </li>
            <li class="clearfix upload-file-li">
                <label class="fl gary" style="width: 15%!important;">集成电路布图设计登记证书</label>
                <div class="fl upload-file-div">
                    <div>
                        <img id="file1100040001" lay-filter="file1100040001" src="/plugin/common/images/57@2x.png" class="thesisimg3 file-upload" filedata="{'type':'1100040001'}">
                        <span class="blue">上传pdf</span>
                    </div>
                    <div class="thesisbor" style="width: 100%!important;">

                    </div>
                </div>
            </li>
            <li class="clearfix  beizhu-li" style="width: 100%!important;">
                <label class="fl gary" style="width: 15%!important;">备注</label>
                <div class="fl beizhu-div">
                    <textarea name="spfF6" lay-maxlength="200" lay-verify="maxlength" rows="" cols="">${formData.spfF6}</textarea>
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="layui-footer" style="width: 100%;text-align: center;background-color: #fff;position:fixed;bottom:0px;height: 50px;padding-top: 15px">
    <input class="layui-btn layui-btn-primary layui-btn-sm" type="button" value="关闭" onclick="_itkl.content.layerClose()">
    <input id="sub-btn" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="formDemo" type="button" value="确定" >
</div>
</form>
<!--JQ-->
<script type="text/javascript" charset="utf-8" src="/plugin/common/js/jquery-1.8.3.min.js"></script>
<!--公用样式JS-->
<script type="text/javascript" charset="utf-8" src="/plugin/common/js/comment.js"></script>
<!--选择城市js-->
<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js"></script>
<script type="text/javascript" charset="utf-8" src="/plugin/it/common/js/itkl.js"></script>
<script type="text/javascript" charset="utf-8" src="/plugin/common/js/form.file.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script>
    var dicId='${dicId}';
    var formCode='${formCode}';
    var temp = '${temp}';
    var fileCount = '${fileCount}';
    var edit = '${edit}';
    var deledFileIds = [];
    layui.use(['form', 'layer', 'upload', 'element', 'table'], function () {
        var form = layui.form, layer = layui.layer, laydate = layui.laydate;
        laydate.render({
            elem: '#spfF5'
        })
        form.verify({
            maxlength: function (v,item) {
                var maxlength = item.getAttribute('lay-maxlength');
                if(v.trim()!=''){
                    if(v.trim().length>maxlength){
                        return "输入长度不能大于"+maxlength+"个字符！";
                    }
                }
            },
            number: function (v) {
                var reg = /^[0-9]*$/;
                var flag = reg.test(v.trim());
                if (!flag) {
                    return '请输入正确的数字';
                }
            },
            decimal: function (v) {
                var reg = /^-?([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,10})?$/;
                var flag = reg.test(v.trim());
                if (!flag) {
                    return '请输入正确的金额';
                }
            },
            perdecimal: function (v) {
                var reg = /^[1-9][0-9]*([.][0-9]+)?$/;
                var flag = reg.test(v.trim());
                if (!flag) {
                    if(v.trim()!="0"  || v.trim()!=0){
                        return '请输入数字';
                    }
                }
            }
        })
        //提交
        form.on('submit(formDemo)', function (data) {
            $('#sub-btn').attr('disabled','disabled');
            data.field.spfF29 = dicId;
            data.field.spfF30 = formCode;
            if(deledFileIds && deledFileIds.length>0){
                for(var a=0;a<deledFileIds.length;a++){
                    data.field['strList9[' + a + ']'] = deledFileIds[a];
                }
            }
            var json=data.field;
            if(json){
                layerAjax("/it/form/insertBook",json,'',function (d) {
                    if(d){
                        layer.msg(d.msg,{icon:1})
                        setTimeout(function(){
                            parent.location.reload();
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        },1000);
                    }else{
                        $('#sub-btn').removeAttr('disabled');
                        layer.msg(d.msg,{icon:2})
                    }
                })
            }
        })

    })

    $(function(){
        $('input').attr('autocomplete','off');
        var uploadFileAdds = $('.file-upload');
        if(uploadFileAdds && uploadFileAdds.length>0){
            bindOneUploader(uploadFileAdds,0);
        }
        if(edit && edit == '1'){
            initFileShow();
        }
    })
    //显示上传的文件:
    function initFileShow(){
        var uploadFileAdds = $('.file-upload');
        initOneFileShow(uploadFileAdds,0);
    }
    function initOneFileShow(uploadFileAdds,i){
        var aFileUploadAdd = $(uploadFileAdds[i]);
        var fileDataStr = aFileUploadAdd.attr('filedata');
        var fileData = eval('(' + fileDataStr + ')');
        var fileContainer = aFileUploadAdd.parent().next();
        var type = fileData.type;
        layerAjaxGetIT('/it/form/getFileList',{dicId: dicId,formFileType: type},'',uploadFileAdds,i,function (res) {
            if(res.flag){
                //显示:
                showFile(res.data,fileContainer,0);
            }
        })
    }

    function showFile(filelist,container,ind){
        if(filelist && filelist.length>0 && (ind < filelist.length)){
            var aFile = filelist[ind];
            var newFileId = aFile.id;
            var newIndex = $('.form-file-div-'+aFile.type).length*1;
            var fileName = '';
            if(aFile.type == '1100040001'){
                fileName = 'strList2';
            }
            container.prepend('<div class="clearfix form-file-div form-file-div-'+aFile.type+'">\n' +
                '                            <span class="fl file-name-span">'+aFile.fileName+'</span>\n' +
                '                            <img src="/plugin/common/images/89@2x.png" class="fr cursor" onclick="_form_file.del.delReal(this,'+'&apos;'+aFile.id+'&apos;'+','+'&apos;'+aFile.type+'&apos;'+',deledFileIds)">\n' +
                '                            <input type="hidden" class="'+aFile.type+'-input" name="'+fileName+'['+newIndex+']" value="'+newFileId+'" />'+
                '                        </div>');
            ind ++;
            showFile(filelist,container,ind);
        }
    }

    //绑定上传组件单个
    function bindOneUploader(uploadFileAdds,i){
        var aFileUploadAdd = $(uploadFileAdds[i]);
        var id=aFileUploadAdd.attr('id');
        var fileDataStr = aFileUploadAdd.attr('filedata');
        var fileData = eval('(' + fileDataStr + ')');
        if(edit && edit == '1'){
            fileData['linkId'] = '${formCenterFileId}';
        }
        var fileContainer = aFileUploadAdd.parent().next();
        var type = fileData.type;
        var ext = '';
        var fileName = '';
        if(type == '1100040001'){
            ext = 'pdf';
            fileName = 'strList2';
        }
        //上传组件参数自定义:
        var uploadPara = {
            elem: '#'+id,
            accept: 'file',
            temp: temp,
            exts: ext,
            before: function(res){
                this.data = fileData;
            },
            container: fileContainer,
            fileName: fileName,
            // fileOrder: 'desc'
        };
        _form_file.upload.bind(uploadPara);
        if(i < uploadFileAdds.length-1){
            i++;
            bindOneUploader(uploadFileAdds,i);
        }
    }
</script>

</body>

</html>